<template>
	<view class="container">
		<view class="header">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#EA3D37"
				tabbarBgImg="/icons/bar.png"></u-tabs>
		</view>
		<view class="box">
			<view class="content">
				<view class="nolist" v-if="orderList.length==0">
					<view style="text-align: center;">
						<view>
						</view>
						<view style="color: #666;">暂无相关订单</view>
					</view>
				</view>
				<view class="list" v-for="(item,index) in orderList" :key="index" @click="gourls(item)" v-else>
					<view class="title">
						<view class="order_num">订单号：{{item.order_id}}</view>
						<view class="status">{{item._status._title}}</view>
					</view>
					<view class="content_con">
						<view class="small_info" v-for="(item2,index2) in item.cartInfo" :key="index2">
							<image :src="item2.productInfo.image" mode="aspectFill"></image>
							<view class="infos">
								<view class="name">{{item2.productInfo.store_name}}</view>
								<view class="sku">{{item2.productInfo.attrInfo.suk}}</view>
								<view class="num_a_wd">
									<view>x{{item2.cart_num}}</view>
									<view class="wd_box" v-if="item2.bd_value !== ''">
										<text class="ice" style="margin-right: 10rpx;">冰冻{{item2.bdInfo.bd}}</text>|
										<text style="margin-left: 10rpx;">常温{{item2.bdInfo.cw}}</text>
									</view>
								</view>
							</view>
							<view class="price_box">
								<view>
									<view class="big_price"><text>￥</text>{{item2.productInfo.attrInfo.price}}</view>
									<view class="small_price"><text>￥</text>{{item2.productInfo.attrInfo.ot_price}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="btns">
						<view class="count_box">
							<view class="money">
								实付金额：<text>￥{{item.pay_price}}</text>
							</view>
							<view class="goods">共{{item.total_num}}件商品</view>
						</view>
						<view class="btn_box">
							<view class="btn pay_btn" style="margin-right: 20rpx;" v-if="item._status._type == 0"
								@click.stop="payClick(item.order_id)">立即支付</view>
							<view class="btn" v-if="item._status._type == 0" @click.stop="cancelClkick(item.order_id)">
								取消订单
							</view>
							<button class="btn kuBtn" open-type="contact" bindcontact="handleContact"
								v-if="item._status._type == 2 || item._status._type == 1" session-from="sessionFrom">
								<view class="name">联系客服</view>
							</button>
							<view class="btn" v-if="item._status._type == 4" @click="applyClick(item)">申请售后
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="status !== 'nomore'" :status="status" />
		<u-modal v-model="show" :content="content" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import index from '../../uview-ui';

	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待配送',
				}, {
					name: '配送中',
				}, {
					name: '已完成',
				}],
				orderList: [{}],
				show: false,
				orderStatus: '',
				content: '是否取消该订单',
				current: 0,
				count: 1,
				page: 1,
				pageSize: 5,
				status: 'loadmore',
				type: 'normal',
				hxCurrent: 0,
				cancelId: 0,
				userinfo: '',
				money: '0.00',
				total: '',
				order_sn: '',
				payType: 'wechat',
			}
		},
		onLoad(opdata) {
			console.log(opdata);
			this.current = opdata.current
			this.change(this.current)
			// this.getData()
		},
		onShow() {

		},
		onReachBottom() {
			if (this.orderList.length < this.pageSize || this.status == 'nomore') return;
			this.status = 'loading';
			this.page++
			this.getData()
		},
		methods: {
			applyClick(item) {
				this.$gourl(
					`/mallPage/afterSales/applySales?orderInfo=${JSON.stringify(item)}`
				)
			},
			gourls(item) {
				this.$gourl('/mallPage/order/orderDetails?order=' + item.order_id)
			},
			async getData() {
				uni.showLoading({
					title: '加载中'
				})
				await this.$allApi.getOrderList({
					page: this.page,
					limit: this.pageSize,
					type: this.orderStatus
				}).then(res => {
					console.log(res);
					let datas = res.data
					for (let item of datas) {
						for (let o of item.cartInfo) {
							o.bdInfo = {}
							if (o.bd_value && o.bd_value[0] == '{') {
								o.bdInfo = JSON.parse(o.bd_value)
								if (o.bdInfo.type == '全冰') {
									o.bdInfo.bd = o.cart_num * o.productInfo.attrInfo.num
									o.bdInfo.cw = 0
								} else if (o.bdInfo.type == '一半冰一半不冰') {
									o.bdInfo.bd = Math.ceil(o.cart_num * o.productInfo.attrInfo.num / 2)
									o.bdInfo.cw = o.cart_num * o.productInfo.attrInfo.num - o.bdInfo.bd
								} else if (o.bdInfo.type == '常温') {
									o.bdInfo.bd = 0
									o.bdInfo.cw = o.cart_num * o.productInfo.attrInfo.num
								} else if (o.bdInfo.type == '自定义冰冻数量') {
									o.bdInfo.bd = Math.ceil(o.cart_num * o.productInfo.attrInfo.num * o
										.bdInfo.bfNumber)
									o.bdInfo.cw = o.cart_num * o.productInfo.attrInfo.num - o.bdInfo.bd
								}
							} else {
								o.bdInfo = {
									bd: 0,
									cw: 0
								}
							}
						}
					}
					if (res.data.length < this.pageSize) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
					this.orderList = [...this.orderList, ...res.data]
					uni.hideLoading()
				})
			},
			change(e) {
				this.current = e
				this.page = 1
				this.orderList = []
				if (this.current == 0) this.orderStatus = ''
				else if (this.current == 1) this.orderStatus = 0
				else if (this.current == 2) this.orderStatus = 1
				else if (this.current == 3) this.orderStatus = 2
				else if (this.current == 4) this.orderStatus = 4
				this.getData()
			},
			payClick(order_id) {
				this.$allApi.submitOrderPay({
					uni: order_id,
					from: 'routine'
				}).then(res => {
					let pay = res.data.result.jsConfig
					console.log(pay);
					uni.requestPayment({
						timeStamp: pay.timestamp, // 时间戳（单位：秒）
						nonceStr: pay.nonceStr, // 签名算法，这里用的 MD5/RSA 签名
						package: pay.package, // 固定值
						signType: pay.signType, // 签名算法，这里用的 MD5/RSA 签名
						paySign: pay.paySign, //签名
						// 支付成功的回调
						success: payRes => {
							console.log(payRes)
							if (payRes.errMsg == "requestPayment:ok") {
								uni.showToast({
									icon: "success",
									title: "支付成功！"
								})
								this.current = 2
								this.orderStatus = 1
								this.page = 1
								this.orderList = []
								this.getData()
							}

						},
						// 支付失败回调
						fail: err => {
							console.log(err);
							uni.showToast({
								icon: "none",
								title: "支付失败"
							})
						}
					})
				})
			},
			cancelClkick(id) {
				this.show = true
				this.cancelId = id
			},
			confirmOrder(id) {
				this.$allApi.updateOrderStatus({
					id: id,
					status: 4
				}).then(res => {
					this.$u.toast('确认收货成功')
					this.page = 1
					this.orderList = []
					this.getData()
				})
			},
			confirm() {
				this.$allApi.updateOrderStatus({
					id: this.cancelId,
					status: 99
				}).then(res => {
					this.$u.toast('取消订单成功')
					this.page = 1
					this.orderList = []
					this.getData()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.kuBtn {
		// bg
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;

		.btn_box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				width: 140rpx;
				height: 58rpx;
				border-radius: 28rpx;
				font-size: 24rpx;
				border: 1rpx solid #999999;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333;
			}

			.pay_btn {
				color: #fff;
				background: #EA3D37;
				border: 1rpx solid #EA3D37;
			}

			.success {
				border: 1rpx solid #EA3D37;
				color: #EA3D37;
			}
		}

		.count_box {
			.money {
				text {
					color: #EA3D37;
					font-weight: 500;
				}
			}

			.goods {
				color: #999999;
				font-size: 20rpx;
			}
		}
	}

	.container {
		min-height: 100vh;
		background: #f8f8f8;
	}

	.header {
		height: 100rpx;
		box-shadow: 0px 2px 5px 0px #eee;
		background: #fff;
		position: sticky;
		top: 0;
		width: 100vw;
		left: 0;
		z-index: 30;
	}

	.content {
		padding: 20rpx;

		.nolist {
			height: 50vh;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.list {
			padding: 20rpx 30rpx;
			background: #fff;
			margin-bottom: 30rpx;
			border-radius: 20rpx;

			.title {
				padding-bottom: 20rpx;
				position: relative;
				border-bottom: 1px solid #eee;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333;
				justify-content: space-between;

				.status {
					color: #26ACF5;
				}
			}

			.content_con {
				padding-top: 30rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #eee;

				.head {
					padding: 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 50rpx;
							height: 50rpx;
							border-radius: 10rpx;
							margin-right: 20rpx;
						}
					}
				}

				.small_info {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 10rpx;
					}

					.price_box {
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: right;

						.big_price {
							font-size: 32rpx;

							text {
								font-size: 24rpx;
							}
						}

						.small_price {
							font-size: 28rpx;
							color: #666;
							text-decoration: line-through;

							text {
								font-size: 16rpx;
							}
						}
					}

					.infos {
						flex: 1;
						padding-left: 20rpx;
						width: 596rpx;
						line-height: 1.8;

						.name {
							font-size: 24rpx;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						.sku {
							font-size: 20rpx;
							color: #666;
						}
					}

					.num_a_wd {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						font-size: 24rpx;

						.wd_box {
							display: flex;
							margin-left: 20rpx;
							align-items: center;
							justify-content: space-between;
							background: #F6F6F7;
							height: 32rpx;
							border-radius: 6rpx;
							font-size: 20rpx;
							padding: 0 14rpx;

							.ice {
								color: #26ACF5;
							}
						}
					}
				}

			}
		}
	}
</style>